@import '../variables/default.scss';
@import '../mixins/index.scss';

.at-noticebar {
  position: relative;
  padding: $spacing-v-sm $spacing-h-lg;
  display: flex;
  flex-direction: row;
  align-items: center;
  font-size: 0;
  background: $at-noticebar-bg-color;

  /* elements */
  &__content {
    flex: 1;
    display: flex;
    flex-direction: row;
    word-break: break-all;
    word-wrap: break-word;

    &-icon {
      //display: inline-block;
      margin-right: 12px;
      vertical-align: top;
    }

    &-text {
      //display: inline;
      //font-size: $at-noticebar-font-size;
      &__text {
        color: $at-noticebar-text-color;
        font-size: $at-noticebar-font-size;
      }
    }

    &-inner {
      //display: inline;
      //background-color: #00CC88;
      //display: flex;
      //flex-direction: row;
      //flex-wrap: wrap;
      //width: 100%;
      //overflow: hidden;
    }
  }

  &__close {
    width: $at-noticebar-btn-close-size;
    height: $at-noticebar-btn-close-size;
    //transform: translate3d(0, -50%, 0);
    padding-right: 50px;
  }

  &__more {
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: flex-end;

    &-text {
      color: $color-grey-2;
      font-size: $at-noticebar-font-size;
      line-height: $line-height-zh * $at-noticebar-font-size;
      vertical-align: middle;
    }

    //&-icon {
    //  color: $color-grey-2;
    //  //display: inline-block;
    //  width: $at-noticebar-font-size;
    //  vertical-align: middle;
    //  overflow: hidden;
    //  .at-icon {
    //    font-size: $at-noticebar-font-size;
    //  }
    //}
  }

  /* modifiers */
  &--single {
    display: flex;
    justify-content: space-between;

    &__content {
      flex: 1;
      display: flex;
      flex-direction: row;
      overflow: hidden;

      &-text {
        display: flex;
        overflow: hidden;
      }

      &-inner {
        flex: 1;
        @include line(1);
      }
    }
  }

  &--marquee {
    &__content {
      display: flex;
      flex-direction: row;
      justify-content: center;
      overflow: hidden;

      &-text {
        flex: 1;
        //overflow: hidden;
        //background-color: #00CC88;
      }

      &-inner {
        //display: inline-block;
        white-space: nowrap;
        padding-left: 100%;
        height: $at-noticebar-font-size * 1.5;
        animation: marquee 1s linear infinite both;
        //transform: translateZ(0);
      }
    }
  }

  &--more {
    .at-noticebar__content {
      max-width: 525px;
    }
  }

  &--weapp {
    .at-noticebar__content-inner {
      animation: none;
    }
  }
}

@keyframes marquee {
  100% {
    //transform: translate3d(-100%, 0, 0);
  }
}
